<template>
  <a-list
    item-layout="vertical"
    size="large"
    :pagination="false"
    :data-source="listData"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <template #actions>
          <span id="collection" @click="collection(item)">
            <StarOutlined style="margin-right: 2px" />
            {{ item.collectionNum }}
          </span>
          <span id="likes" @click="like(item)">
            <LikeOutlined style="margin-right: 2px" />
            {{ item.likeNum }}
          </span>
          <span>
            <MessageOutlined style="margin-right: 2px" />
            {{ item.commentNum }}
          </span>
        </template>

        <a-list-item-meta id="topInfo">
          <template #title>
            <div>
              <span>{{ item.author }}</span>
              <div style="font-size: 8px">{{ item.showtime }}</div>
            </div>
          </template>
          <template #avatar>
            <div>
              <a-avatar :src="item.imgHead" :size="48" />
            </div>
          </template>
        </a-list-item-meta>
        <span id="dycontent" @click="gotoContent(item)">
          <div v-html="item.content"></div>
          <div id="picstyle">
            <span
              v-for="(pics, index) in item.picList"
              :key="index"
              style="margin: 5px 10px 5px 0;"
            >
              <a-image :width="240" :src="pics.url" />
            </span>
          </div>
        </span>
      </a-list-item>
    </template>
  </a-list>
</template>
<script>
import moment from "moment";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import { doLike, doCollection } from "../../api/dynamic";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },
  props: ["listDynamic"],

  setup(props) {
    const listData = ref(props.listDynamic);
    const router = useRouter();

    const gotoContent = (item) => {
      // console.log(item);
      sessionStorage.setItem("DID", item.did);
      router.push({ path: "/contentPage2" });
    };

    const like = (item) => {
      doLike({
        url: "/dynamic/doLike",
        did: item.did,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const collection = (item) => {
      // console.log(item.aid);
      doCollection({
        url: "/dynamic/doCollection",
        did: item.did,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const pagination = {
      onChange: (page) => {
        console.log(page);
      },
      pageSize: 3,
    };

    return {
      listData,
      pagination,
      moment,
      like,
      collection,
      gotoContent,
    };
  },
});
</script>

<style scoped>
#topInfo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
#dycontent {
  color: black;
}
#dycontent :hover {
  color: #005177;
  cursor: pointer;
}
#picstyle {
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
</style>